body {
  font-size: 10px;
  font-family: "Roboto", sans-serif;
  background-color: #444756;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 400px;
  padding: 1rem 1rem 1.5rem;
  box-sizing: border-box;
  margin: 10vh auto;
}

.home-style {
  --app-content-background-color: #63c7f1;
}

.products-style {
  --app-content-background-color: #d36e5a;
}

.services-style {
  --app-content-background-color: #ed9426;
}

.about-style {
  --app-content-background-color: #4dd146;
}

.help-style {
  --app-content-background-color: #a3a3a3;
}

.tabbar {
  background-color: var(--app-content-background-color);
  border-radius: 1rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  height: 70vh;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  transition: background-color .4s;
}

.tabbar ul,
.tabbar li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tabbar ul {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f9f8fa;
  justify-content: center;
  height: 50px;
}

.tabbar li {
  display: flex;
  justify-content: center;
  font-size: 1rem;
  margin-right: 5px;
  transition: all .4s;
  background-color: #f9f8fa;
  width: 60px;
  height: 60px;
  color: #888;
  position: relative;
  cursor: pointer;
}

.tab-one ul {
  justify-content: center;
}

.tab-one li {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1px;
  left: 0;
  width: 60px;
  height: 50px;
  transition: top .2s ease-out,width .4s,border-radius .4s,box-shadow .4s;
}

.tab-one .active {
  z-index: 100;
  width: 50px;
  height: 50px;
  top: -1.5rem;
  border-radius: 100px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
